<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
                <title>
                    Editor
                </title>
                <style media="screen" type="text/css">
                    body {
        overflow: hidden;
    }

    #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
                </style>
            </meta>
        </meta>
    </head>
    <body>
        <pre id="editor">&lt;?php 
    echo "Hello, World!"; 
?&gt;
</pre>
        <script src="src-noconflict/ace.js" type="text/javascript"></script>
        <script src="src-noconflict/ext-language_tools.js"></script>
        
        <script>
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            //填充容器
            editor.setAutoScrollEditorIntoView(true);
            //隐藏中间竖线
            editor.setOption("showPrintMargin", false);
            //字体大小
            editor.setFontSize(25);
            //设置只读（true时只读，用于展示代码）
            editor.setReadOnly(false);
            //自动换行,设置为off关闭
            editor.setOption("wrap", "free")
            //行高亮
            editor.setHighlightActiveLine(false);
            //大小自适应
            editor.resize();
            //启用提示菜单
            ace.require("ace/ext/language_tools");
            editor.setOptions({
                //基本自动完成
                enableBasicAutocompletion: true,
                //自动换行
                wrap:true,
                //显示行号
                showLineNumbers:true,
                //显示隐藏字符
                showInvisibles:false,
                //启用代码段
                enableSnippets:true,
                //实时自动完成
                enableLiveAutocompletion: true,
                //编码类型
                encoding:'utf-8',
                //语言类型
                mode:'ace/mode/php',
            });

            //是否使用tab缩进，，如果是false那就是空格缩进，true就是tab缩进
            editor.getSession().setUseSoftTabs(false);
            //设置制表符长度
            editor.getSession().setTabSize(4);
            //跳转到第几行
            // setTimeout(function(){
            //     editor.gotoLine(4)
            // },10000);
            //搜索
            // setTimeout(function(){
            //     editor.execCommand('find');
            // },10000);
            //替换
            // setTimeout(function(){
            //     editor.execCommand('replace');
            // },10000);
        </script>
    </body>
</html>
